<template>
	<view class="wrapper bg">
		<Header>
			<template #left>
				<text>推荐</text>
			</template>
		</Header>
		<view class="swiper">
			<u-swiper :height="200" indicator :list="bannerList" radius="8" circular indicatorMode="dot"></u-swiper>
		</view>
		<view class="notice">
			<u-notice-bar duration="2000" mode="link" :text="text" direction="column"></u-notice-bar>
		</view>

		<view class="classify">
			<Title>
				<template #left>
					<text>每日精选</text>
				</template>
				<template #right class="right">
					<view class="ceshi">
						<u-icon name="calendar-fill" size="20"></u-icon>
						<view class="txt">
							<u-text :text="Date.now()" mode="date" format="dd"></u-text>号
						</view>
					</view>
				</template>
			</Title>
			<view class="content">
				<u-scroll-list :indicator="false">
					<view v-for="item in classifyList" :key="item._id" class="scroll-item">
						<image :src="item.smallPicurl" mode="aspectFill" @click="godetail(item._id)"></image>
					</view>
				</u-scroll-list>
			</view>
		</view>
		<view class="special">
			<Title>
				<template #left>
					<text>专题分类</text>
				</template>
				<template #right class="right">
					<navigator url="/pages/classify/classify" open-type="reLaunch">more+</navigator>
				</template>
			</Title>
			<view class="content">
				<u-grid>
					<u-grid-item v-for="item in specialList" :key="item._id">
						<Item :show="show" :item="item"></Item>
					</u-grid-item>
					<u-grid-item>
						<Item :show="!show"></Item>
					</u-grid-item>
				</u-grid>
			</view>
		</view>
	</view>
</template>

<script setup>
	import Title from '../../components/title/title.vue'
	import Item from '../../components/item/item.vue'
	import Header from '../../components/header/header.vue'
	import { getBanner, getClassify, getSpecial } from '../../utils/api.js'
	let show = ref(false)
	let text = ['床前明月光', '疑是地上霜', '举头望明月', '低头思故乡']
	let bannerList = ref([])
	let classifyList = ref([])
	let specialList = ref([])
	let arr = ref([])
	onLoad(async () => {
		//banner
		let res = await getBanner()
		let res1 = res.data.map(item => item.picurl)
		bannerList.value = res1

		// classify
		let res2 = await getClassify()
		classifyList.value = res2.data

		//special
		let res3 = await getSpecial()
		specialList.value = res3.data

	})
	const godetail = (id) => {
		uni.setStorageSync('picinfo', classifyList.value)
		uni.navigateTo({
			url: "/pages/detail/detail?id=" + id
		})
	}
</script>

<style scoped lang='scss'>
	.wrapper {
		width: 100%;
		padding: 15rpx;

		.notice {
			margin-top: 10px;
			border-radius: 20px;
			overflow: hidden;

			:deep(.u-icon__icon span) {
				color: $uni-color-primary !important;
			}
		}

		.classify {

			.ceshi {
				display: flex;

				:deep(.u-icon__icon) {
					color: $uni-color-primary !important;
				}

				.txt {
					display: flex;
					color: $uni-color-primary;

					:deep(.u-text span) {
						color: $uni-color-primary;
					}
				}
			}



			.scroll-item {
				width: 200rpx;
				height: 440rpx;
				margin-right: 10rpx;

				image {
					width: 200rpx;
					height: 100%;
				}
			}
		}



	}
</style>